<template>
    <div class="whiteBac mt10 p10">
      <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
          <el-row>
            <el-col :span="8">
              <div>
                <h4 class="advertTitle">广告位1：</h4>
                <el-form-item label="商品编号" prop="advertOneName">
                  <el-input placeholder="请确保商品已上架" style="width: 182px;" v-model="ruleForm.advertOneName"></el-input>
                </el-form-item>
                <el-form-item label="PC封面" prop="advertOnePCImg">
                  <div class="">
                    <el-upload
                      class="avatar-uploader avert-pc"
                      :action="uploadFileAction"
                      :show-file-list="false"
                      accept="image/gif,image/jpeg,image/jpg,image/bmp"
                      :before-upload="beforeAvatarUpload"
                      :on-success="onePCImgMethods">
                      <img v-if="ruleForm.advertOnePCImg" :src="ruleForm.advertOnePCImg" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon advert-pc-icon"></i>
                    </el-upload>
                  </div>
                  <div class="mt10 light-grey">请上传568*198的图片</div>
                </el-form-item>
                <el-form-item label="APP封面" prop="advertOneAPPImg">
                  <div class="">
                    <el-upload
                      class="avatar-uploader avert-app"
                      :action="uploadFileAction"
                      :show-file-list="false"
                      accept="image/gif,image/jpeg,image/jpg,image/bmp"
                      :before-upload="beforeAvatarUpload"
                      :on-success="oneAPPImgMethods">
                      <img v-if="ruleForm.advertOneAPPImg" :src="ruleForm.advertOneAPPImg" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon advert-app-icon"></i>
                    </el-upload>
                  </div>
                  <div class="mt10 light-grey">请上传720*300的图片</div>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <h4 class="advertTitle">广告位2：</h4>
                <el-form-item label="商品编号" prop="advertTwoName">
                  <el-input placeholder="请确保商品已上架" style="width: 182px;" v-model="ruleForm.advertTwoName"></el-input>
                </el-form-item>
                <el-form-item label="PC封面" prop="advertTwoPCImg">
                  <div class="">
                    <el-upload
                      class="avatar-uploader avert-pc"
                      :action="uploadFileAction"
                      :show-file-list="false"
                      accept="image/gif,image/jpeg,image/jpg,image/bmp"
                      :before-upload="beforeAvatarUpload"
                      :on-success="twoPCImgMethods">
                      <img v-if="ruleForm.advertTwoPCImg" :src="ruleForm.advertTwoPCImg" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon advert-pc-icon"></i>
                    </el-upload>
                  </div>
                  <div class="mt10 light-grey">请上传568*198的图片</div>
                </el-form-item>
                <el-form-item label="APP封面" prop="advertTwoAPPImg">
                  <div class="">
                    <el-upload
                      class="avatar-uploader avert-app"
                      :action="uploadFileAction"
                      :show-file-list="false"
                      accept="image/gif,image/jpeg,image/jpg,image/bmp"
                      :before-upload="beforeAvatarUpload"
                      :on-success="twoAPPImgMethods">
                      <img v-if="ruleForm.advertTwoAPPImg" :src="ruleForm.advertTwoAPPImg" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon advert-app-icon"></i>
                    </el-upload>
                  </div>
                  <div class="mt10 light-grey">请上传720*300的图片</div>
                </el-form-item>

              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <h4 class="advertTitle">广告位3：</h4>
                <el-form-item label="商品编号" prop="advertThreeName">
                  <el-input placeholder="请确保商品已上架" style="width: 182px;" v-model="ruleForm.advertThreeName"></el-input>
                </el-form-item>
                <el-form-item label="PC封面" prop="advertThreePCImg">
                  <div class="">
                    <el-upload
                      class="avatar-uploader avert-pc"
                      :action="uploadFileAction"
                      :show-file-list="false"
                      accept="image/gif,image/jpeg,image/jpg,image/bmp"
                      :before-upload="beforeAvatarUpload"
                      :on-success="threePCImgMethods">
                      <img v-if="ruleForm.advertThreePCImg" :src="ruleForm.advertThreePCImg" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon advert-pc-icon"></i>
                    </el-upload>
                  </div>
                  <div class="mt10 light-grey">请上传568*198的图片</div>
                </el-form-item>
                <el-form-item label="APP封面" prop="advertThreeAPPImg">
                  <div class="">
                    <el-upload
                      class="avatar-uploader avert-app"
                      :action="uploadFileAction"
                      :show-file-list="false"
                      accept="image/gif,image/jpeg,image/jpg,image/bmp"
                      :before-upload="beforeAvatarUpload"
                      :on-success="threeAPPImgMethods">
                      <img v-if="ruleForm.advertThreeAPPImg" :src="ruleForm.advertThreeAPPImg" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon advert-app-icon"></i>
                    </el-upload>
                  </div>
                  <div class="mt10 light-grey">请上传720*300的图片</div>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item>
                <div class="tc mt15">
                  <el-button type="primary" :disabled="isLetDisabled" @click="submitForm('ruleForm')">保存并发布</el-button>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
</template>

<script>
  import service from '@/service/index'
  import {  } from '@/base/utils'
    export default {
      data(){
        return{
          uploadFileAction:service.haiBeiServerUpload(),
          goodsNumStr:[],
          pcNumStr:[],
          appNumStr:[],
          isLetDisabled:false,
          ruleForm:{
            advertOneName:'',
            advertOnePCImg:'',
            advertOneAPPImg:'',
            advertTwoName:'',
            advertTwoPCImg:'',
            advertTwoAPPImg:'',
            advertThreeName:'',
            advertThreePCImg:'',
            advertThreeAPPImg:'',
          },
          rules:{
            advertOneName:[
              { required: true, message: '请输入商品编号', trigger: 'blur' },
              { min: 1, max: 80, message: '长度在 1 到 80 个字符', trigger: 'blur' }
            ],
            advertOnePCImg:[{ required: true, message: '请选择图片', trigger: 'change' }],
            advertOneAPPImg:[{ required: true, message: '请选择图片', trigger: 'change' }],
            advertTwoName:[
              { required: true, message: '请输入商品编号', trigger: 'blur' },
              { min: 1, max: 80, message: '长度在 1 到 80 个字符', trigger: 'blur' }
            ],
            advertTwoPCImg:[{ required: true, message: '请选择图片', trigger: 'change' }],
            advertTwoAPPImg:[{ required: true, message: '请选择图片', trigger: 'change' }],
            advertThreeName:[
              { required: true, message: '请输入商品编号', trigger: 'blur' },
              { min: 1, max: 80, message: '长度在 1 到 80 个字符', trigger: 'blur' }
            ],
            advertThreePCImg:[{ required: true, message: '请选择图片', trigger: 'change' }],
            advertThreeAPPImg:[{ required: true, message: '请选择图片', trigger: 'change' }]
          }
        }
      },
      mounted(){
        this.queryAdvertList(); //查询广告位
      },
      methods:{
        beforeAvatarUpload(file) {
          const isLt5M = file.size / 1024 / 1024 < 5;
          if (!isLt5M) {
            this.$message.error('上传头像图片大小不能超过 5MB!');
          }
          return isLt5M;
        },
        onePCImgMethods(file){
          this.ruleForm.advertOnePCImg = file.url;
          this.pcNumStr[0]=(file.url);
          //console.log(this.pcNumStr);
        },
        oneAPPImgMethods(file){
          this.ruleForm.advertOneAPPImg = file.url;
          this.appNumStr[0]=(file.url);
          //console.log(this.appNumStr);
        },
        twoPCImgMethods(file){
          this.ruleForm.advertTwoPCImg = file.url;
          this.pcNumStr[1]=(file.url);
          //console.log(this.pcNumStr);
        },
        twoAPPImgMethods(file){
          this.ruleForm.advertTwoAPPImg = file.url;
          this.appNumStr[1]=(file.url);
          //console.log(this.appNumStr);
        },
        threePCImgMethods(file){
          this.ruleForm.advertThreePCImg = file.url;
          this.pcNumStr[2]=(file.url);
          //console.log(this.pcNumStr);
        },
        threeAPPImgMethods(file){
          this.ruleForm.advertThreeAPPImg = file.url;
          this.appNumStr[2]=(file.url);
          //console.log(this.pcNumStr);
        },
        queryAdvertList(){
          service.haiBeiServerQueryAdvertList({}).then(res => {
            if (res.success) {
              let array_one = res.result[0];
              let array_two = res.result[1];
              let array_three = res.result[2];
              this.ruleForm.advertOneName = array_one!==undefined?array_one.goods_num:'';
              this.ruleForm.advertOnePCImg = array_one!==undefined?array_one.pc_img:'';
              this.ruleForm.advertOneAPPImg = array_one!==undefined?array_one.app_img:'';
              this.ruleForm.advertTwoName = array_two!==undefined?array_two.goods_num:'';
              this.ruleForm.advertTwoPCImg = array_two!==undefined?array_two.pc_img:'';
              this.ruleForm.advertTwoAPPImg = array_two!==undefined?array_two.app_img:'';
              this.ruleForm.advertThreeName = array_three!==undefined?array_three.goods_num:'';
              this.ruleForm.advertThreePCImg = array_three!==undefined?array_three.pc_img:'';
              this.ruleForm.advertThreeAPPImg = array_three!==undefined?array_three.app_img:'';
              //赋值编辑时未重新上传图片时的图片参数
              this.pcNumStr[0]=array_one!==undefined?array_one.pc_img:'';
              this.pcNumStr[1]=array_two!==undefined?array_two.pc_img:'';
              this.pcNumStr[2]=array_three!==undefined?array_three.pc_img:'';
              this.appNumStr[0]=array_one!==undefined?array_one.app_img:'';
              this.appNumStr[1]=array_two!==undefined?array_two.app_img:'';
              this.appNumStr[2]=array_three!==undefined?array_three.app_img:'';
            }else{
              this.$message({type:'error', message:res.msg});
              return;
            }
          });
        },
        submitForm(formName){
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.isLetDisabled = true;
              this.goodsNumStr[0] = this.ruleForm.advertOneName;
              this.goodsNumStr[1] = this.ruleForm.advertTwoName;
              this.goodsNumStr[2] = this.ruleForm.advertThreeName;
              let params = {
                sort_num:'1,2,3',  //广告位编号1 2 3
                goods_num:this.goodsNumStr.toString(),
                pc_img:this.pcNumStr.toString(),
                app_img:this.appNumStr.toString()
              }
              //console.log(JSON.stringify(params,'----'));
              service.haiBeiServerAddAdvert(params).then(res => {
                if (res.success) {
                  setTimeout(()=>{
                    this.isLetDisabled = false;
                  },1000);
                  this.$message({type:'success', message:res.msg});
                  this.queryAdvertList();
                }else{
                  this.isLetDisabled = false;
                  this.$message({type:'error', message:res.msg});
                  return;
                }
              });
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        resetForm(){
          this.ruleForm.advertOneName = '';
          this.ruleForm.advertOnePCImg = '';
          this.ruleForm.advertOneAPPImg = '';
          this.ruleForm.advertTwoName = '';
          this.ruleForm.advertTwoPCImg = '';
          this.ruleForm.advertTwoAPPImg = '';
          this.ruleForm.advertThreeName = '';
          this.ruleForm.advertThreePCImg = '';
          this.ruleForm.advertThreeAPPImg = '';
        }
      }
    }
</script>

<style scoped>

</style>
